<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<style>
			.home{
				height: 100vh;
				border: 5px solid #666;
			}
			.header{
				height: 50px;
				background-color: aquamarine;
				display: flex;
				align-items: center;
			}
			.button{
				display:flex;
				    justify-content: center;
				    align-items: center;
					color:#fff
			}
	
		</style>
		<div id="app">
		<button @click="text++">+</button>
		{{text}}	
			
	<hr>

     <q-button :round="true" width="200px" height="50" :text="text" 
	 @transfer="lanzi"  > </q-button>	
       <hr>
	   
			 <q-button @transfer="lanzi" :text="text"></q-button>
	   
		</div>
	</body>
	<script src="vue.js"></script>
	<script setup>
		const {ref,createApp,computed} = Vue;
		const app = createApp({
			setup() {
	             let text = ref(0)
				 
				 function lanzi(zhitiao){
					 console.log(zhitiao)
					 text.value = zhitiao
				 }
				 return {
					 text,
					 lanzi
				 }
			},

		})

		app.component('q-button',{
			
			props:{   // 终极版
				 width:{
		             type:[String,Number],
					 default:"300px"
				 },
				 height:{
		             type:[String,Number],
					 default:"50px"
				 },
				 backgroundColor:{
					 type:[String],
					 default:"green"
				 },
				 round:{
					 type:[Boolean],
					 default:true
				 },
				 roundSize:{
					 type:Number,
					 default:30
				 },
				 text:{
					 type:[String,Number],
					 default:'按钮'
				 }
				
			}, 
			setup(props,{emit}){
				  let options = computed(function(){
					  return  props
				  })
				
				  function tansform(n){
				  	return isNaN(Number(n))?n:n+'px'
				  }
				 // 单向数据流 
				  function edit(){
					  
					 console.log(options.value.text)
					 // options.value.text++
					 let text = options.value.text;//  老数据
					 emit('transfer',text+1)
				  }
				  return {
					 options,
					 tansform,
					 edit
				  }
			},
				template:`<div class="button" :style="{
							width:tansform(options.width),
							height:tansform(options.height),
							backgroundColor:options.backgroundColor,
							borderRadius:options.round?options.roundSize+'px':0,
						}"
						
						@click="edit"
						
						>
				{{options.text}}
				</div>`
			})
		app.mount('#app')
		
		
		
	
		
	</script>
</html>